<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 根元素 -->
    <div id="app">
        {{ index }}
        <button @click="index ++">
            按钮
        </button>
        <button @click="over()">
            自杀
        </button>
    </div>
    <!-- 引入vue.js -->
    <script src="./js/vue.js"></script>
    <script>
        // 创建vue实例
        const app = new Vue({
            methods: {
                over(){
                    app.$destroy()
                }
            },
            // 挂载dom
            el: '#app',
            // 数据
            data: {
                index: 0
            },
            /* 
                vue实例也是有从创建到销毁的过程的;
                vue实例销毁是用户主动销毁的:
                    生命周期的钩子函数：
                        就是一个回调函数(到指定的阶段，会调用这个函数);
                    vue的生命周期四大部分：
                        创建过程:
                            创建前(beforeCreate),
                                Vue实例还没有创建，这个时候data数据，事件等this,不可用;
                                页面时最原始的状态;
                            创建后(created)
                                Vue实例已经创建完成，这个钩子函数，也是最早一个可以调用，
                                data数据以及事件的钩子函数，但是页面仍然是最原始的状态;
                                在这个钩子函数里面，通常做一些，页面数据的初始化操作;
                        挂载过程:
                            挂载前(beforeMount):
                                虚拟DOM已经创建完成，在这个钩子函数中，所有的DOM操作，
                                都不奏效，页面仍然是最原始的状态;
                                为什么都不奏效:
                                    因为在当前钩子函数，Vue已经把当前实例当中所有的，
                                    dom元素，都记录在了虚拟DOM当中，虚拟DOM被存储在浏览器的内存当中;
                                    所以说即使，在当前钩子函数中，删除了Vue实例当中的DOM，
                                    仍然在挂载后，会重新覆盖掉;
                            挂载后(mounted):
                                虚拟DOM转换成真实DOM，页面是最新的，数据也是最新的;
                        更新过程:
                            更新前(beforeUpdate);
                                每当vue实例当中的数据发生变化，都会触发这个钩子函数；
                                页面还没有更新，但是data数据已经是最新的了;
                            更新后(updated);
                                页面是最新的，数据也是最新的;
                        销毁过程:
                            销毁前(beforeDestroy):
                                Vue实例销毁前触发的钩子函数，此时
                                页面和数据不会出现任何的变化
                            销毁后(destroyed):
                                这个钩子函数是最后一次能够访问，data数据以及事件的钩子;
                                一般在这个函数中，做一些停止计时器等操作;
                                这个钩子函数执行完成后，页面的所有的数据将不再更新，
                                但是页面还会停留在最后一次更新的状态;
            */
            beforeCreate() {
                console.log(this.index,'创建前');
                // 断点调试
                debugger
            },
            created() {
                console.log(this.index,'创建后');
                // 断点调试
                debugger
            },
            beforeMount() {
                document.querySelector('button').remove()
                // 断点调试
                debugger
            },
            mounted() {
                debugger
            },
            beforeUpdate() {
                console.log(this.index,'更新前');
                debugger
            },
            updated(){
                debugger
            },
            beforeDestroy() {
                console.log('销毁前');
                debugger
            },
            destroyed() {
                console.log('销毁后');
                debugger
            },
        })
    </script>
</body>
</html>